<script setup lang="ts">
import { ref } from 'vue'
import type { SwiperItem } from '@/types/home'

const activeIndex = ref(0)

// 接收父组件传递的轮播图数据
// defineProps(['swiperData']) 非ts写法 (不推荐) 使用时无类型提示
// ts写法 (推荐) 使用时有类型提示
defineProps<{
  swiperData: SwiperItem[]
}>()

// 当轮播图切换时触发,获取当前图片的索引
// onChange:UniHelper.SwiperOnChange 使用UniHelper标注事件回调参数对象类型
const onChange: UniHelper.SwiperOnChange = (event) => {
  // 更改activeIndex当前激活图片的索引,用于实现指示点联动
  activeIndex.value = event.detail.current
}
</script>

<template>
  <view class="carousel">
    <swiper @change="onChange" circular autoplay :interval="3000">
      <swiper-item v-for="item in swiperData" :key="item.id">
        <navigator :url="item.hrefUrl" hover-class="none" class="navigator">
          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 自定义指示点 -->
    <view class="indicator">
      <!-- 动态绑定类名实现指示点联动 -->
      <text
        v-for="(item, index) in swiperData.length"
        :key="item"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss">
/* 引入轮播图样式*/
@import '@/components/styles/CustomSwiper.scss';
</style>
